<template>
  <div class="container">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">保存</el-button>
<!--        <el-button @click="resetForm">重置</el-button>-->
      </el-form-item>
      <el-row :gutter="30" >
        <el-col :span="10">
          <el-form-item label-width="150px" label="主页背景" prop="maxImageSrc">
            <my-upload  v-model="formData.maxImageSrc" @input="setMaxImageSrc"></my-upload>
          </el-form-item>
        </el-col>
        <el-col :span="19">
          <el-form-item label-width="150px" label="大标题" prop="maxTitle">
            <el-input v-model="formData.maxTitle" placeholder="请输入大标题" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="19">
          <el-form-item label-width="150px" label="大标题日期" prop="maxTime">
            <el-date-picker v-model="formData.maxTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '100%'}" placeholder="请选择大标题日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="19">
          <el-form-item label-width="150px" label="个人信息背景" prop="userBjsrc">
            <my-upload  v-model="formData.userBjsrc" @input="setUserBjsrc"></my-upload>
          </el-form-item>
        </el-col>
        <el-col :span="19">
          <el-form-item label-width="150px" label="博客头像" prop="userUsersrc">
            <my-upload  v-model="formData.userUsersrc" @input="setUserUsersrc"></my-upload>
          </el-form-item>
        </el-col>
        <el-col :span="19">
          <el-form-item label-width="150px" label="博客名称" prop="userUsername">
            <el-input v-model="formData.userUsername" placeholder="请输入博客名称" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="19">
          <el-form-item label-width="150px" label="简介" prop="userDetail">
            <el-input v-model="formData.userDetail" type="textarea" placeholder="请输入简介"
              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="19">
          <el-form-item label-width="150px" label="相册" prop="images">
<!--            <el-input v-model="formData.images" placeholder="请在下面上传图片" clearable :style="{width: '100%'}">-->
<!--            </el-input>-->
            <multi-upload ref="imagesUpload" v-model="images" @input="setImages"></multi-upload>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>
<script>
import { listConfig, getConfig, addConfig, updateConfig, delConfig,listConfigByType } from "@/api/blog/config";
import myUpload from "@/components/myUpload/singleUpload"
import multiUpload from "@/components/myUpload/multiUpload"


export default {
  components: {myUpload,multiUpload},
  props: [],
  data() {
    return {
      formData: {
        maxImageSrc: undefined,
        maxTitle: undefined,
        maxTime: null,
        userBjsrc: undefined,
        userUsersrc: undefined,
        userUsername: undefined,
        userDetail: undefined,
        images: undefined,
      },
      rules: {
        maxImageSrc: [{
          required: true,
          message: '请输入主页背景',
          trigger: 'blur'
        }],
        maxTitle: [{
          required: true,
          message: '请输入大标题',
          trigger: 'blur'
        }],
        maxTime: [{
          required: true,
          message: '请选择大标题日期',
          trigger: 'change'
        }],
        userBjsrc: [{
          required: true,
          message: '请输入个人信息背景',
          trigger: 'blur'
        }],
        userUsersrc: [{
          required: true,
          message: '请输入博客头像',
          trigger: 'blur'
        }],
        userUsername: [{
          required: true,
          message: '请输入博客名称',
          trigger: 'blur'
        }],
        userDetail: [{
          required: true,
          message: '请输入简介',
          trigger: 'blur'
        }],
        images: [{
          required: false,
          message: '请选择相册',
          trigger: 'change'
        }],
      },
      maxImageSrc: '',
      maxImageSrcList: [
        ''
      ],
      userBjsrc: "",
      userBjsrcList: [

      ],
      userUsersrc: "",
      userUsersrcList: [

      ],
      images: [],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getForm();
  },
  mounted() {
  },
  methods: {
    getForm(){
      listConfigByType(1).then(response =>{
        for(let i = 0; i < response.rows.length; i++){
          if(response.rows[i].configKey == "maxImageSrc"){
            this.setMaxImageSrc(response.rows[i].configValue);
            continue;
          }
          if(response.rows[i].configKey == "maxTitle"){
            this.formData.maxTitle = response.rows[i].configValue;
            continue;
          }
          if(response.rows[i].configKey == "maxTime"){
            this.formData.maxTime = response.rows[i].configValue;
            continue;
          }
          if(response.rows[i].configKey == "userBjsrc"){
            this.setUserBjsrc(response.rows[i].configValue);
            continue;
          }
          if(response.rows[i].configKey == "userUsersrc"){
            this.setUserUsersrc(response.rows[i].configValue);
            continue;
          }
          if(response.rows[i].configKey == "userUsername"){
            this.formData.userUsername = response.rows[i].configValue;
            continue;
          }
          if(response.rows[i].configKey == "userDetail"){
            this.formData.userDetail = response.rows[i].configValue;
            continue;
          }
          if(response.rows[i].configKey == "images"){
            this.formData.images = response.rows[i].configValue;
            var listImage = (response.rows[i].configValue).split(",");
            this.images = [];
            for(let i = 0; i < listImage.length; i++){
              this.images.push(listImage[i]);
            }
            // this.setImages(response.rows[i].configValue);
            // this.$refs.imagesUpload.setFileList(response.rows[i].configValue);
            continue;
          }
        }
      });
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          updateConfig(this.formData).then(response => {
            this.$modal.msgSuccess("保存成功");
            this.getForm();
          });
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    setMaxImageSrc(arg){
      this.formData.maxImageSrc = arg;
    },
    setUserBjsrc(arg){
      this.formData.userBjsrc = arg;
    },
    setUserUsersrc(arg){
      this.formData.userUsersrc = arg;
    },
    setImages(arg){
      this.images = arg;
      var image_res = "";
      for(let i = 0; i < arg.length; i++){
        image_res = image_res + "," +  arg[i];
      }
      this.formData.images = image_res.substring(1);
      // var res = "";
      // var list = arg.split(",");
      // for(let i = 0; i < list.length; i++){
      //     res = res + list[i].substring(arg.indexOf("/statics/") + 9) + ",";
      // }
      // this.formData.images = res.substring(0,res.length - 1);
    }
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

.container{
  margin-top: 10px;
}

</style>
